import React, { Component } from 'react'

export default class App extends Component {
    render() {


        const styleObj = {
            color: 'blue',
            fontSize: 50, // 当以对象的方式设置样式的时候可以省略 px 单位不写
            border: '1px solid red',
            width: 500,
            height: 200,
            lineHeight: '200px', // 行高如果不加单位会变成字体的倍数
        }

        return (
            <>
                {/* 改写法是错误，因为使用的是虚拟 DOM 所以无法直接设置属性为字符串来调试样式 */}
                {/* <h1 style='color: red'>App 组件样式</h1> */}

                {/* 不能直接这样写，是因为 {} 代表的是 js 表达式，不是一个对象 */}
                {/* <h1 style={color: red}>App 组件样式</h1 > */}

                {/* 行内样式的写法，第一个 {} 是 js 表达式，第二个 {} 是 对象 */}
                <h1 style={{ color: 'red' }}>App 组件样式</h1 >

                <hr />
                <h1 style={styleObj}>App 组件样式</h1 >


            </>
        )
    }
}
